import 'dart:math';

import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  const ChipDemo({super.key});

  @override
  State<ChipDemo> createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {
  final List<String> _tags = [
    'Apple',
    'Banana',
    'Lemon',
  ];

  List<int> chipRand = [];
  List<String> randActionChip = [];
  List<String> _selected = [];
  int randomColor = 230;
  String _choice = '小标签 0';

  @override
  void initState() {
    super.initState();
    _rendChip();
    _rendActionChip();
  }

  _rendChip() {
    Random random = Random();
    chipRand = List<int>.filled(10, 10).toList(); // 初始化 chipRand 列表
    for (int i = 0; i < chipRand.length; i++) {
      chipRand[i] = random.nextInt(150); // 将每个元素设置为0到99之间的随机整数
    }
  }

  _rendActionChip() {
    Random random = Random();
    randActionChip = List<String>.filled(5, '').toList(); // 初始化 randActionChip 列表
    for (int i = 0; i < randActionChip.length; i++) {
      randActionChip[i] = '小标签 ${random.nextInt(100)}'; // 将每个元素设置为0到99之间的随机整数
    }
  }

  String _action = 'Nothing';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ChipDemo'),
        elevation: 0,
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: ListView(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Wrap(
                  spacing: 8,
                  children: [
                    const Chip(
                      label: Text('小'),
                    ),
                    const Chip(
                      label: Text('标'),
                    ),
                    const Chip(
                      label: Text('签'),
                    ),
                    const Chip(
                      label: Text('小标签'),
                      backgroundColor: Colors.amber,
                    ),
                    const Chip(
                      label: Text('小标签'),
                      backgroundColor: Colors.brown,
                      avatar: CircleAvatar(
                        backgroundColor: Colors.green,
                        child: Text('D'),
                      ),
                    ),
                    const Chip(
                      label: Text('小标签'),
                    ),
                    Chip(
                      label: const Text('小标签'),
                      backgroundColor: Colors.lightBlueAccent,
                      onDeleted: () {
                        chipRand;
                        debugPrint('$chipRand');
                        debugPrint('$_tags');
                      },
                      deleteIcon: const Icon(Icons.delete),
                      deleteIconColor: Colors.redAccent,
                      deleteButtonTooltipMessage: "remaove this tag",
                    ),
                    const Divider(
                      color: Colors.amber,
                      height: 32,
                      // indent: 20,
                    ),
                  ],
                ),
              ],
            ),
            const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Wrap(
                  spacing: 8,
                  children: [
                    Chip(
                      label: Text('小标签'),
                    ),
                    Chip(
                      label: Text('小标签'),
                      backgroundColor: Colors.amber,
                    ),
                    Chip(
                      label: Text('小标签'),
                      backgroundColor: Colors.brown,
                      avatar: CircleAvatar(
                        backgroundColor: Colors.green,
                        child: Text('D'),
                      ),
                    ),
                    Chip(
                      label: Text('小标签'),
                      backgroundColor: Colors.pinkAccent,
                      avatar: CircleAvatar(
                        backgroundImage: NetworkImage(
                            'https://p7.itc.cn/q_70/images03/20210529/f34ae9b7220341ef9c5dc93341b3f995.jpeg'),
                        child: Text('D'),
                      ),
                    ),
                  ],
                ),
                Divider(
                  color: Colors.amber,
                  height: 20,
                ),
              ],
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center, 
              children: [
              Wrap(
                spacing: 8,
                children: chipRand.map((eChipRand) {
                  return Chip(
                    label: Text('小标签 $eChipRand'),
                    backgroundColor: Color.fromRGBO(randomColor, randomColor, randomColor, 1),
                    onDeleted: () {
                      setState(() {
                        // debugPrint(randomColor);
                        randomColor = eChipRand;
                        chipRand.remove(eChipRand);
                      });
                    },
                  );
                }).toList(),
              ),
              const Divider(
                color: Colors.amber,
                height: 32,
                // indent: 20,
              ),
              ]
            ),
            Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  child: Text('ActionChip:$_action'),
                ),
                Wrap(
                  spacing: 8,
                  children: randActionChip.map((eRandActionChip) => 
                    ActionChip(
                      label: Text(eRandActionChip),
                      onPressed: () {
                        setState(() {
                          _action = eRandActionChip;
                        });
                      },
                    )
                  ).toList(),
                ),
                const Divider(
                  color: Colors.amber,
                  height: 32,
                  // indent: 20,
                ),
              ]
            ),
            Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  child: Text('FilterChip:${_selected.toString()}'),
                ),
                Wrap(
                  spacing: 8,
                  children: randActionChip.map((eRandActionChip) => 
                    FilterChip(
                      label: Text(eRandActionChip),
                      selected: _selected.contains(eRandActionChip),
                      onSelected: (value) {
                        setState(() {
                          if (_selected.contains(eRandActionChip)) {
                            _selected.remove(eRandActionChip);
                          } else {
                            _selected.add(eRandActionChip);
                          }
                        });
                      },
                    )
                  ).toList(),
                ),
                const Divider(
                  color: Colors.amber,
                  height: 32,
                  // indent: 20,
                ),
              ]
            ),
            Column(
              children: [
                SizedBox(
                  width: double.infinity,
                  child: Text('ChoiceChip:小标签 $_choice'),
                ),
                Wrap(
                  spacing: 8,
                  children: randActionChip.map((eRandActionChip) => 
                    ChoiceChip(
                      label: Text(eRandActionChip),
                      selectedColor: Colors.amber,
                      selected: _choice == eRandActionChip,
                      onSelected: (value) {
                        setState(() {
                          _choice = eRandActionChip;
                        });
                      },
                    )
                  ).toList(),
                ),
                const Divider(
                  color: Colors.amber,
                  height: 32,
                  // indent: 20,
                ),
              ]
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.restore),
        onPressed: () {
          setState(() {
            _rendChip();
            _selected = [];
            _choice = '小标签 0';
          });
        },
      ),
    );
  }
}
